<template>
  <view style="height: 100vh;">
    <view class="box-picker_position">
      <view class="map_wp">
        <map id="map_20221212" class="picker-map" scale="12" min-scale="12" @regionchange="handleRegionchange" :latitude="latitude" :longitude="longitude" show-location='true'></map>
        <view :class="['picker_map_location', animateLocation?'animated':'']"></view>
      </view>
      <view class="list-picker_position">
        <view class="hd">
          <input type="text" v-model="searchKey" class="input_text" placeholder="请输入搜索地点">
          <button class="btn-search" type="default" @click="searchPosition"><view class="picker-search"></view>搜索</button>
        </view>
        <view class="bd">
          <view v-for="(item,index) in searchlist" @click="changeSelectItem(index)" class="item" :key="index">
            <view class="item-l">
              <view class="picker-address"></view>
            </view>
            <view class="item-c">
              <view class="title">{{item.title}}</view>
              <view class="address">{{item.address}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  components: {
  },
  data() {
    return {
      type: 'work',
      animateLocation:false,
      isChangeSelectItem:false,
      searchKey:'',
      latitude:'36.811995',
      longitude:'119.05539',
      searchlist:[],
      qqmapsdkKey:'XSRBZ-TUFLJ-TT7FB-FKEVB-KOSOQ-72FVK' ,//必须，申请地址：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview，小程序还需要在控制台（https://lbs.qq.com/dev/console/application/mine）添加小程序的appid
    }
  },
  onLoad(options){
    this.type = options.type;
    this.searchKey = (decodeURIComponent(options.search));
    this.animateLocation = true;
    this.searchPosition();
  },
  methods: {

    searchPosition() {
      if (this.searchKey.replace(/\s+/, '') == '') {
        uni.showToast({
          title: '请输入关键字'
        })
        return;
      }
      let that = this;

      uni.request({
        url: 'https://apis.map.qq.com/ws/place/v1/suggestion', //仅为示例，并非真实接口地址。
        data: {
          keyword: that.searchKey,
          key: that.qqmapsdkKey,
        },
        header: {},
        success: (res) => {
          let dataList = res.data.data;
          let isSelect = false;
          if (res.data.status == 0 && dataList.length > 0) {
            that.searchlist = [...res.data.data];
            that.latitude = dataList[0].location.lat;
            that.longitude = dataList[0].location.lng;

            setTimeout(() => {
              that.animateLocation = false;
            }, 200)
          }

        }
      });
    },
    changeSelectItem(index) {
      let item = this.searchlist[index];
      if(this.type == 'work'){
        this.$xyfun.prePage().chooseHolidayLocation(item.location.lat,item.location.lng,item.title,item.address);
      }else{
        this.$xyfun.prePage().chooseUnHolidayLocation(item.location.lat,item.location.lng,item.title,item.address);
      }
      this.$xyfun.back();

    },
    handleRegionchange(e) {
      var that = this;
      that.animateLocation = true;
      console.log(e)
      if (e.type == 'end') {
        that.latitude = e.detail.centerLocation.latitude;
        that.longitude = e.detail.centerLocation.longitude;
        that.animateLocation = false;
        uni.request({
          url : 'https://apis.map.qq.com/ws/geocoder/v1/',
          data : {
            coord_type : 5,
            get_poi : 1,
            output : 'json',
            key : that.qqmapsdkKey,
            location : that.latitude + '%2C' + that.longitude
          },
          header: {

          },
          success: (res)=>{
            console.log(res)
            that.searchlist = res.data.result.pois;
          }
        })
      }
    },

  }
}
</script>

<style scoped lang="scss">
@keyframes bounceInDown {
  from,
  20%,
  53%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30rpx, 0) scaleY(1.1);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15rpx, 0) scaleY(1.05);
  }

  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    transform: translate3d(0, -4rpx, 0) scaleY(1.02);
  }
}

.box-picker_position {
  height: 100%;
  width: 100%;
  background: #fff;
  display: flex;
  flex-flow: column;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.map_wp {
  position: relative;
  width: 750rpx;
  height: 400rpx;
}

.picker_map_location {
  width: 60rpx;
  height: 60rpx;
  background-image: url("data:image/svg+xml,%3Csvg t='1670988557938' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3498' width='200' height='200'%3E%3Cpath d='M511.968 0c-207.84 0-376.96 169.12-376.96 376.992 0 54.208 11.104 105.984 32.96 153.888 94.24 206.24 274.976 424 328.128 485.824 3.968 4.608 9.792 7.296 15.904 7.296s11.904-2.656 15.904-7.296c53.12-61.824 233.856-279.552 328.128-485.824 21.888-47.904 32.96-99.648 32.96-153.888-0.032-207.872-169.152-376.992-376.992-376.992zM511.968 572.8c-107.968 0-195.808-87.84-195.808-195.808s87.84-195.84 195.808-195.84 195.808 87.84 195.808 195.84c0 107.968-87.84 195.808-195.808 195.808z' fill='%23fa3c23' p-id='3499'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  background-position: center bottom;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -30rpx;
  margin-top: -60rpx;
  z-index: 999;
  transform-origin: center bottom;
}

.picker_map_location.animated {
  animation: bounceInDown .6s linear infinite;
}

.picker-map {
  width: 750rpx;
  height: 400rpx;
}

.list-picker_position {
  position: relative;
  flex: 1;
  display: flex;
  flex-flow: column;
  overflow: hidden;

  .hd {
    padding: 20rpx 20rpx 10rpx;
    display: flex;

    .input_text {
      flex: 1;
      box-sizing: border-box;
      background: #f2f2f2;
      border-radius: 6rpx;
      height: 60rpx;
      font-size: 28rpx;
      padding-left: 1em;
    }
  }

  .bd {
    padding: 20rpx;
    box-sizing: border-box;
    flex: 1;
    overflow-y: scroll;

    .item {
      display: flex;
      padding: 15rpx 10rpx;
      border-bottom: 1px solid #ccc;
      line-height: 1.92;
      align-items: stretch;

      .title {
        font-size: 32rpx;
      }

      .address {
        font-size: 24rpx;
        color: #999;
        line-height: 1.5;
      }
    }

    .item-l {
      padding: 10rpx 6rpx 0 0;
    }

    .item-c {
      flex: 1;
    }

    .item-r {
      width: 60rpx;
      display: flex;
      align-items: center;
      align-content: center;
    }

    .item.disabled {
      opacity: .5;
    }
  }
}

.btn-search {
  background: #007AFF;
  font-size: 24rpx;
  color: #fff;
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  width: 120rpx;
}

.picker-search {
  background-image: url("data:image/svg+xml,%3Csvg t='1670900132396' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='2679' width='200' height='200'%3E%3Cpath d='M685.6 660.336l155.152 155.168a16 16 0 0 1 0 22.624l-11.312 11.328a16 16 0 0 1-22.624 0l-158.528-158.544a289.792 289.792 0 0 1-165.152 51.36C322.336 742.256 192 611.904 192 451.12 192 290.336 322.336 160 483.136 160c160.784 0 291.12 130.336 291.12 291.136 0 82.112-33.984 156.272-88.672 209.2z m-202.464 33.92c134.272 0 243.12-108.848 243.12-243.12C726.256 316.848 617.408 208 483.136 208 348.848 208 240 316.848 240 451.136c0 134.272 108.848 243.12 243.136 243.12z' p-id='2680' fill='%23dbdbdb'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  background-size: cover;
  width: 36rpx;
  height: 36rpx;
  width: 36rpx;
  display: block;
  margin-right: 5rpx;
}

.picker-checked {
  background-image: url("data:image/svg+xml,%3Csvg t='1670909673260' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='3763' width='200' height='200'%3E%3Cpath d='M417.185185 768c-9.481481 0-18.962963-3.792593-26.548148-11.377778l-246.518518-246.518518c-15.17037-15.17037-15.17037-37.925926 0-53.096297 15.17037-15.17037 37.925926-15.17037 53.096296 0L417.185185 676.977778l409.6-409.6c15.17037-15.17037 37.925926-15.17037 53.096296 0 15.17037 15.17037 15.17037 37.925926 0 53.096296l-436.148148 436.148148c-7.585185 7.585185-17.066667 11.377778-26.548148 11.377778z' p-id='3764' fill='%231e63ed'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  width: 46rpx;
  height: 46rpx;
  display: block;
}

.picker-address {
  background-image: url("data:image/svg+xml,%3Csvg t='1670910118471' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4833' width='200' height='200'%3E%3Cpath d='M508.313 1018.666c0 0-379.51-422.921-379.51-632.516 0-209.606 169.914-379.51 379.51-379.51s379.511 169.903 379.51 379.51c0 209.596-379.51 632.516-379.51 632.516zM508.313 55.295c-182.719 0-330.854 150.305-330.854 335.72s330.854 559.534 330.854 559.534 330.854-374.117 330.854-559.534c0-185.415-148.135-335.72-330.854-335.72zM508.312 512.654c-87.336 0-158.129-70.793-158.129-158.129s70.793-158.129 158.129-158.129 158.129 70.793 158.129 158.129c0 87.328-70.793 158.129-158.129 158.129zM508.313 240.185c-64.488 0-116.772 52.285-116.772 116.772s52.285 116.772 116.772 116.772c64.498 0 116.772-52.285 116.772-116.772 0-64.488-52.275-116.772-116.772-116.772z' fill='%23666666' p-id='4834'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  width: 36rpx;
  height: 36rpx;
  display: block;
}
</style>